<template>
	<view>
		<u-navbar :is-fixed="false" back-icon-color="#fff" :back-text-style="{color:'#fff'}"  :border-bottom="false" :is-back="false" back-text="消防检测" :background="{ background:'#357BED'}">
			<view class="nav-txt-left text-white">
				总览地图
			</view>
		</u-navbar>
		
		<view class="search">
			<u-search bg-color="#fff" search-icon="map-fill" @search="search" shape="square" :show-action="false" input-align="center" placeholder="搜索"
				v-model="keyword"></u-search>
		</view>
		
		<map id='mapEle' show-location show-compass show-scale enable-rotate scale="15" rotate="360" style="width: 100%; height:calc(100vh - 160rpx);"
		 :latitude="latitude" @tap="normal()" :longitude="longitude" :markers="markers" :controls="controls" @markertap="markerItem($event)"></map>
		
		<view class="flag">
			<view class="item">
				<u-icon name="map-fill" color="#F12D32" size="40"></u-icon>
				<view class="txt">国保</view>
			</view>
			<view class="item">
				<u-icon name="map-fill" color="#0FB481" size="40"></u-icon>
				<view class="txt">市保</view>
			</view>
			<view class="item">
				<u-icon name="map-fill" color="#6937D6" size="40"></u-icon>
				<view class="txt">区保</view>
			</view>
			<view class="item">
				<u-icon name="map-fill" color="#C6CFD5" size="40"></u-icon>
				<view class="txt">未定</view>
			</view>
		</view>
		
		
		<u-popup :closeable="true" v-model="show" mode="bottom">
				<view>
					<view class="top">
						<view class="text-black" style="font-size: 32rpx;font-weight: 600;margin: 10rpx 0;">{{placeInfo.title}} | 责任人:郭晓明</view>
						<view class="text-gray">地址:{{placeInfo.address}}</view>
					</view>
					<view class="fun flex-around">
						<view class="item flex-center">
							<image src="../../static/img/xiaof.jpg" mode="widthFix"></image>
							<text>消防</text>
						</view>
						<view class="item flex-center">
							<image src="../../static/img/anf.jpg" mode="widthFix"></image>
							<text>安防</text>
						</view>
						<view class="item flex-center">
							<image src="../../static/img/fangl.jpg" mode="widthFix"></image>
							<text>防雷</text>
						</view>
					</view>
					
				</view>
			</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:'',
				latitude: 29.701480,
				longitude: 105.723605,
				mapContext: '',
				markers: [],
				modalName: false,
				devInfo: {},
				controls: [{
					id: 1,
					iconPath: "/static/control.png",
					position: {
						left: 187,
						top: 300,
						width: 40,
						height: 40
					},
					clickable: true
				}],
				show:false,
				point:[
					{
						id:1,
						longitude:105.723605,
						latitude:29.701480,
						title:'大足石刻',
						address:'重庆市大足区宝顶镇大足石刻风景区'
					},
					{
						id:2,
						longitude:121.435355,
						latitude:31.161181,
						title:'上海南站',
						address:'上海市徐汇区沪闵路289号'
					}
				],
				placeInfo:{}
			}
		},
		computed: {

		},
		onLoad(option) {
			this.userInfo=this.$util.getUserInfo()
			this.getDevLocation()
		},
		onReady() {
			this.mapContext = uni.createMapContext('mapEle');
			// this.initLocation();
		},
		methods: {
			search(){
				this.show=true
			},
			//初始化定位
			initLocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					isHighAccuracy: true,
					success: function(res) {
						_this.latitude = res.latitude;
						_this.longitude = res.longitude;
						// console.log('当前位置的经度：' + res.longitude);
						// console.log('当前位置的纬度：' + res.latitude);
					}
				});
			},
			//获取景点室外有效位置
			getDevLocation() {
				this.$axios.post('Region/XGetRegion',this.userInfo, p => {
					for (let item of this.point) {
						item.iconPath = "/static/normal_car.png"
						item.width = 25;
						item.height = 25;
					}
					this.markers = this.point
				})
			},
			//点击标注点
			markerItem(e){
				this.show=true
				for (let item of this.markers) {
					if (item.id == e.detail.markerId) {
						// item.iconPath = '/static/current_car.png'
						this.placeInfo = item;
						// item.width = 30;
						// item.height = 38;
					}
				}
			},
			//点击地图其他地方，恢复初始化
			normal(){
				console.log('点击地图其他地方，恢复初始化')
				// for (let item of this.markers) {
				// 	item.iconPath = "/static/normal_car.png"
				// 	item.width = 25;
				// 	item.height = 25;
				// }
			}
			
		}



	}
</script>

<style lang="scss">
	.search{
		padding:20rpx 40rpx;
	}
	.top{
		padding: 20rpx;
	}
	.fun{
		padding: 20rpx;
		image{
			width: 50px;
			margin-right: 20rpx;
		}
	}
	.flag{
		position: fixed;
		right: 30rpx;
		bottom: 20rpx;
		z-index: 100;
		width: 40px;
		background-color: white;
		border-radius: 4rpx;
		text-align: center;
		.item{
			margin: 30rpx 0;
		}
		.txt{
			font-size: 24rpx;
			color: #606266;
		}
	}
</style>
